<script lang="ts" setup>
import mcht from '@/api/mcht'
import { useHomeStore } from '@/store'

const {
  mchtNo,
  shopId,
  notice,
  digitalCurrency,
  discount,
  transactionSummary,
  menuBit,
  roleFlag,
  adjustFlag,
  sb,
} = storeToRefs(useHomeStore())

// const imgUrl = 'https://xxxx:18080/napFileApi/merchant/common/file/download?imageId=top04&bindingType=1'

const originMenu = [
  { name: '订单查询', icon: 'i-ri:menu-search-line', link: '/pages/home/order/list', color: '#5680f0', bgcolor:'#e7f4fd' },
  { name: '对账单查询', icon: 'i-ri:phone-find-line', link: '/pages/home/statement/list', color: '#6b55de', bgcolor: '#f3f1ff' },
  { name: '统计查询', icon: 'i-ri:notification-badge-line', link: '/pages/home/statistics/list', color: '#49b557', bgcolor: '#e5faec' },
  { name: '订单退货', icon: 'i-ri:caravan-line', link: '/pages/home/refund/query', color: '#fc6e49', bgcolor: '#f9efe7' },
  { name: '遗失申请', icon: 'i-ri:question-line', link: '/pages/home/loss/report', color: '#ffbe05', bgcolor: '#fff4dc' },
  { name: '数币对账单', icon: 'i-ri:money-cny-circle-line', link: '/pages/home/ecnystatement/list', color: '#9e77b4', bgcolor: '#fce3fc' },
  { name: '数币订单', icon: 'i-ri:money-cny-circle-fill', link: '/pages/home/ecnyorder/list', color: '#a9ab03', bgcolor: '#f5f8d7' },
  { name: '员工管理', icon: 'i-ri:user-settings-line', link: '/pages/home/staff/list', color: '#f96566', bgcolor: '#fbe9e9' },
  { name: '授权码维护', icon: 'i-ri:qr-code-line', link: '/pages/home/authcode/refresh', color: '#ae7e65', bgcolor: '#fef5e6' },
  { name: '门店管理', icon: 'i-ri:store-2-line', link: '/pages/home/store/list', color: '#91b071', bgcolor: '#f1fae2' },
  { name: '门店新增', icon: 'i-ri:store-3-line', link: '/pages/home/store/input-first', color: '#548c82', bgcolor: '#daf5e7' },
  { name: '码牌交易', icon: 'i-ri:search-2-line', link: '/pages/home/qrOrders/list', color: '#ac5663', bgcolor: '#fedad4' },
]

// #region
// const originMenu = [
//   { name: '订单查询', icon: '/static/home/1.png', link: '/pages/home/order/list' },
//   { name: '对账单查询', icon: '/static/home/2.png', link: '/pages/home/statement/list' },
//   { name: '统计查询', icon: '/static/home/1.png', link: '/pages/home/statistics/list' },
//   { name: '订单退货', icon: '/static/home/3.png', link: '/pages/home/refund/query' },
//   { name: '遗失申请', icon: '/static/home/4.png', link: '/pages/home/loss/report' },
//   { name: '数币对账单', icon: '/static/home/2.png', link: '/pages/home/ecnystatement/list' },
//   { name: '数币订单查询', icon: '/static/home/1.png', link: '/pages/home/ecnyorder/list' },
//   { name: '员工管理', icon: '/static/home/5.png', link: '/pages/home/staff/list' },
//   { name: '授权码维护', icon: '/static/home/6.png', link: '/pages/home/authcode/refresh' },
//   { name: '门店管理', icon: '/static/home/7.png', link: '/pages/home/store/list' },
//   { name: '门店新增', icon: '/static/home/8.png', link: '/pages/home/store/input-first' },
//   { name: '码牌交易查询', icon: '/static/home/1.png', link: '/pages/home/qrOrders/list' },
// ]
// const menu = originMenu.filter((m, index) => menuBit.value[index] === '1')
//#endregion

const menuList = ref([])
menuList.value = originMenu.filter((m, index) => menuBit.value[index] === '1')
let menu = []
if (sb.value === '0') {
  // menu = menuList.value
  menu = menuList.value.filter(m => !['数币对账单', '数币订单'].includes(m.name))
} else {
  menu = menuList.value
}
const merchat = ref(mchtNo.value)
if (shopId.value) {
  merchat.value = shopId.value
}
const active = ref([1])
function goMenu(item) {
  uni.navigateTo({
    url: item.link,
  })
}


// const noticeStr = ref('')
async function getNotice() {
  const { data } = await mcht.getNotice()
  if (data.status === 'success') {
    notice.value = data.data.notices
    // noticeStr.value = data.data.notices.join('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
  }
}

const type = ref('')
const refreshing = ref(false)
async function getData() {
  refreshing.value = true
  const { data } = await mcht.changeCount(merchat.value, type.value)
  refreshing.value = false
  digitalCurrency.value = data.data.digitalCurrency
  discount.value = data.data.discount
  transactionSummary.value = data.data.transactionSummary

  adjustFlag.value = data.data.adjustFlag
  sb.value = data.data.sb
  uni.stopPullDownRefresh()
}
watch(() => merchat.value, () => {
  getData()
})

const windowBarHeight = ref(50)
onMounted(() => {
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  windowBarHeight.value = menuButtonInfo.bottom + 10
  getNotice()
})

const swiperPage = ref(1)
const swiperList = ref([
  '/static/home/b1.png', '/static/home/b2.png'
])

function go_notice(richText: any) {
  let processedContent = richText.replace(/&nbsp;/g, ' '); // 替换为普通空格
  uni.navigateTo({
    url: `/pages/home/notice/detail?richText=${encodeURIComponent(processedContent)}`,
  })
}

onPullDownRefresh(() => {
  console.log('refresh')
  getData()
})
</script>

<template>
  <div style="width: 100%;" :style="{ height: windowBarHeight + 'px' }"></div>
  <div class="li-bg"></div>
  <div class="li-bg-s"></div>
  <div class="li-bg-l shadow-blur"></div>

  <div class="li-home">

    <!-- 用户栏 -->
    <div class="li-home-user">
      <div class="li-home-user-lft">
        <div class="i-ri:arrow-down-s-line" style="margin-right: 10rpx;"></div>
        <store-casader v-model="merchat" v-model:type="type" hidden-self
          :disabled="roleFlag === '02' || roleFlag === '03'" />
        <!-- <div class="i-ri:arrow-right-s-line"></div> -->
      </div>
      <div class="li-home-user-rit" @click="getData">
        <!-- <div class="li-home-user-rit-text">刷新</div> -->
        <div class="i-ri:refresh-line li-home-user-rit-refresh" />
      </div>
    </div>

    <!-- 轮播栏 -->
    <!-- <div class="li-home-swiper">
      <nut-swiper :init-page="swiperPage" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
        <nut-swiper-item v-for="item in swiperList" :key="item">
          <img :src="item" alt="" />
        </nut-swiper-item>
      </nut-swiper>
    </div> -->

    <!-- 通告栏 -->
    <div class="li-home-notice">
      <div class="li-home-notice-icon">
        <i class="fas i-ri:volume-down-fill"></i>
      </div>
      <div class="li-home-notice-content">
        <div class="li-home-notice-content-scroll">
          <block v-for="item in notice" :key="index">
            <div class="li-home-notice-content-scroll-item" @click="go_notice(item.val)">
              <i class="fas i-ri:star-s-fill"></i> {{ item.theme }}
            </div>
          </block>
        </div>
      </div>
    </div>

    <!-- 数据面板 -->
    <div class="li-home-dataPanel ">
      <div class="li-home-dataPanel-header b-c1" style="border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;">
        <div class="i-ri:database-line li-home-dataPanel-header-icon" style="color: #2196F3;"></div>
        <div class="li-home-dataPanel-header-text">当日交易(非数字人民币)</div>
      </div>
      <div class="li-home-dataPanel-card">

        <div class="li-home-dataPanel-card-item">
          <div class="li-home-dataPanel-card-item-icon" style="background-color: #ffeaed;">
            <div class=" i-ri:money-cny-circle-line li-home-dataPanel-card-item-icon-img" style="color: #ee544f;">
            </div>
          </div>
          <div class="li-home-dataPanel-card-item-info">
            <div class="li-home-dataPanel-card-item-info-price lhdc-d">
              <!-- {{ transactionSummary?.incomeAmount || 0.00 }} -->
              <nut-price v-if="transactionSummary" :price="transactionSummary.incomeAmount" symbol="¥"
                custom-class="lhdc-d" />
              <nut-price v-else :price="0" symbol="¥" custom-class="lhdc-d" />
            </div>
            <div class="li-home-dataPanel-card-item-info-name">营业额(元)</div>
          </div>
        </div>

        <div class="li-home-dataPanel-card-item">
          <div class="li-home-dataPanel-card-item-icon" style="background-color: #ebfbee;">
            <div class=" i-ri:money-cny-circle-line li-home-dataPanel-card-item-icon-img" style="color: #5cb85c;">
            </div>
          </div>
          <div class="li-home-dataPanel-card-item-info">
            <div class="li-home-dataPanel-card-item-info-price lhdc-s">
              <!-- {{ transactionSummary?.trAmt || 0 }} -->
              <nut-price v-if="transactionSummary" :price="transactionSummary.trAmt" symbol="¥" custom-class="lhdc-s" />
              <nut-price v-else :price="0" symbol="¥" custom-class="lhdc-s" />
            </div>
            <div class="li-home-dataPanel-card-item-info-name">营业额退款(元)</div>
          </div>
        </div>

        <div class="li-home-dataPanel-card-item">
          <div class="li-home-dataPanel-card-item-icon" style="background-color: #E3F2FD;">
            <div class=" i-ri:money-cny-circle-line li-home-dataPanel-card-item-icon-img" style="color: #2196F3;">
            </div>
          </div>
          <div class="li-home-dataPanel-card-item-info">
            <div class="li-home-dataPanel-card-item-info-price">
              <!-- {{ transactionSummary?.fees || 0 }} -->
              <nut-price v-if="transactionSummary" :price="transactionSummary.fees" symbol="¥" custom-class="lhdc-p" />
              <nut-price v-else :price="0" symbol="¥" custom-class="lhdc-p" />
            </div>
            <div class="li-home-dataPanel-card-item-info-name">手续费</div>
          </div>
        </div>

        <div class="li-home-dataPanel-card-item">
          <div class="li-home-dataPanel-card-item-icon" style="background-color: #ebfbee;">
            <div class=" i-ri:money-cny-circle-line li-home-dataPanel-card-item-icon-img" style="color: #5cb85c;">
            </div>
          </div>
          <div class="li-home-dataPanel-card-item-info">
            <div class="li-home-dataPanel-card-item-info-price lhdc-s">
              <!-- {{ transactionSummary?.mrAmt || 0 }} -->
              <nut-price v-if="transactionSummary" :price="transactionSummary.mrAmt" symbol="¥" custom-class="lhdc-s" />
              <nut-price v-else :price="0" symbol="¥" custom-class="lhdc-s" />
            </div>
            <div class="li-home-dataPanel-card-item-info-name">商户账退款(元)</div>
          </div>
        </div>
        <div class="li-home-dataPanel-card-item">
          <div class="li-home-dataPanel-card-item-icon" style="background-color: #E3F2FD;">
            <div class=" i-ri:file-list-3-line li-home-dataPanel-card-item-icon-img" style="color: #2196F3;">
            </div>
          </div>
          <div class="li-home-dataPanel-card-item-info">
            <div class="li-home-dataPanel-card-item-info-price">
              {{ transactionSummary?.orderCount || 0 }}
            </div>
            <div class="li-home-dataPanel-card-item-info-name">收款笔数(笔)</div>
          </div>
        </div>

        <div class="li-home-dataPanel-card-item">
          <div class="li-home-dataPanel-card-item-icon" style="background-color: #ebfbee;">
            <div class=" i-ri:file-list-line li-home-dataPanel-card-item-icon-img" style="color: #5cb85c;">
            </div>
          </div>
          <div class="li-home-dataPanel-card-item-info">
            <div class="li-home-dataPanel-card-item-info-price lhdc-s">
              {{ transactionSummary?.refundCount || 0 }}
            </div>
            <div class="li-home-dataPanel-card-item-info-name">退款笔数(笔)</div>
          </div>
        </div>

      </div>
    </div>

    <!-- v-if="sb === '1'" -->
    <div class="li-home-dataPanel" v-if="sb === '1'">
      <div class="li-home-dataPanel-header b-c3" style="border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;">
        <div class="i-ri:database-fill li-home-dataPanel-header-icon" style="color: #f0ad4e;"></div>
        <div class="li-home-dataPanel-header-text">当日交易(数字人民币)</div>
      </div>

      <div class="li-home-dataPanel-card">

        <div class="li-home-dataPanel-card-item">
          <div class="li-home-dataPanel-card-item-icon" style="background-color: #ffeaed;">
            <div class=" i-ri:money-cny-circle-line li-home-dataPanel-card-item-icon-img" style="color: #ee544f;">
            </div>
          </div>
          <div class="li-home-dataPanel-card-item-info">
            <div class="li-home-dataPanel-card-item-info-price lhdc-d">
              <!-- {{ digitalCurrency?.incomeAmount || 0.00 }} -->
              <nut-price v-if="digitalCurrency" :price="digitalCurrency.incomeAmount" symbol="¥"
                custom-class="lhdc-d" />
              <nut-price v-else :price="0" symbol="¥" custom-class="lhdc-d" />
            </div>
            <div class="li-home-dataPanel-card-item-info-name">营业额(元)</div>
          </div>
        </div>

        <div class="li-home-dataPanel-card-item">
          <div class="li-home-dataPanel-card-item-icon" style="background-color: #ebfbee;">
            <div class=" i-ri:money-cny-box-line li-home-dataPanel-card-item-icon-img" style="color: #5cb85c;">
            </div>
          </div>
          <div class="li-home-dataPanel-card-item-info">
            <div class="li-home-dataPanel-card-item-info-price lhdc-s">
              <!-- {{ digitalCurrency?.refundAmount || 0.00 }} -->
              <nut-price v-if="digitalCurrency" :price="digitalCurrency.refundAmount" symbol="¥"
                custom-class="lhdc-s" />
              <nut-price v-else :price="0" symbol="¥" custom-class="lhdc-s" />
            </div>
            <div class="li-home-dataPanel-card-item-info-name">退款金额(元)</div>
          </div>
        </div>

        <div class="li-home-dataPanel-card-item">
          <div class="li-home-dataPanel-card-item-icon" style="background-color: #E3F2FD;">
            <div class=" i-ri:file-list-3-line li-home-dataPanel-card-item-icon-img" style="color: #2196F3;">
            </div>
          </div>
          <div class="li-home-dataPanel-card-item-info">
            <div class="li-home-dataPanel-card-item-info-price">
              {{ digitalCurrency?.incomeCount || 0 }}
            </div>
            <div class="li-home-dataPanel-card-item-info-name">订单笔数(笔)</div>
          </div>
        </div>

        <div class="li-home-dataPanel-card-item">
          <div class="li-home-dataPanel-card-item-icon" style="background-color: #ebfbee;">
            <div class=" i-ri:file-list-line li-home-dataPanel-card-item-icon-img" style="color: #5cb85c;">
            </div>
          </div>
          <div class="li-home-dataPanel-card-item-info">
            <div class="li-home-dataPanel-card-item-info-price lhdc-s">
              {{ digitalCurrency?.refundCount || 0 }}
            </div>
            <div class="li-home-dataPanel-card-item-info-name">退款笔数(笔)</div>
          </div>
        </div>

      </div>
    </div>

    <!-- v-if="adjustFlag === '1'" -->
    <div class="li-home-dataPanel" v-if="adjustFlag === '1'">
      <div class="li-home-dataPanel-header b-c0" style="border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;">
        <div class="i-ri:money-cny-circle-line li-home-dataPanel-header-icon" style="color: #5cb85c;"></div>
        <div class="li-home-dataPanel-header-text">优惠额度统计</div>
      </div>
      <div class="li-home-dataPanel-card">

        <div class="li-home-dataPanel-card-item">
          <div class="li-home-dataPanel-card-item-icon" style="background-color: #ebfbee;">
            <div class=" i-ri:database-fill li-home-dataPanel-card-item-icon-img" style="color: #5cb85c;">
            </div>
          </div>
          <div class="li-home-dataPanel-card-item-info">
            <div class="li-home-dataPanel-card-item-info-price lhdc-s">
              <!-- {{ discount?.fullAmount || 0.00 }} -->
              <nut-price v-if="discount" :price="discount.fullAmount" symbol="¥" custom-class="lhdc-s" />
              <nut-price v-else :price="0" symbol="¥" custom-class="lhdc-s" />
            </div>
            <div class="li-home-dataPanel-card-item-info-name">本月总额度</div>
          </div>
        </div>

        <div class="li-home-dataPanel-card-item">
          <div class="li-home-dataPanel-card-item-icon" style="background-color: #ffeaed;">
            <div class=" i-ri:database-line li-home-dataPanel-card-item-icon-img" style="color: #ee544f;">
            </div>
          </div>
          <div class="li-home-dataPanel-card-item-info">
            <div class="li-home-dataPanel-card-item-info-price lhdc-d">
              <!-- {{ discount?.remainingAmount || 0.00 }} -->
              <nut-price v-if="discount" :price="discount.remainingAmount" symbol="¥" custom-class="lhdc-d" />
              <nut-price v-else :price="0" symbol="¥" custom-class="lhdc-d" />
            </div>
            <div class="li-home-dataPanel-card-item-info-name">剩余额度</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮组 -->
    <div class="li-home-btns">
      <nut-grid :border="false" clickable>
        <nut-grid-item v-for="(item, index) in menu" :key="index" :text="item.name" @click="(e) => goMenu(item, e)">
          <!-- <img class="img" :src="item.icon" alt=""> -->
          <div class="li-home-btns-iBox" :style="{ backgroundColor: item.bgcolor}">
            <div :class="item.icon" class="li-home-btns-iBox-icon" :style="{ color: item.color }"></div>
          </div>
        </nut-grid-item>
      </nut-grid>
    </div>

  </div>
</template>

<route lang="json">{
  "layout": "home",
  "style": {
    "navigationBarTitleText": "商户服务",
    "navigationStyle": "custom",
    "backgroundColorContent": "#f1f1f1",
    "enablePullDownRefresh": true
  }
}</route>

<style lang="sass" scoped>
.li-home
  .swiper
    padding: 10px
    border-radius: 5px
    overflow: hidden
  .grid
    .img
      width: 25px
      height: 25px
  .center
    background-color: #fff
    display: flex
    justify-content: space-between
    align-items: center
    padding: 0 20px
  .blocks
    background-color: #e8e8e8
    padding: 10px
    .block
      margin-bottom: 10px
      border-radius: 5px
      overflow: hidden

:deep(.nut-input)
  background: none
  padding-left: 0

:deep(.nut-swiper)
  border-radius: 15rpx
  box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2)

:deep(.nut-swiper-item)
  width: 686rpx 
  height: 291rpx
  image
    width: 100%
    height: 100%
:deep(.nut-input--border)
  border-bottom: none!important

:deep(.nut-grid-item__content)
  background: none!important

:deep(.lhdc-d)
  color: #eb0909
  font-size: 40rpx!important
  font-weight: bold

:deep(.lhdc-p)
  color: #000000
  font-size: 40rpx!important
  font-weight: bold

:deep(.lhdc-s)
  color: #5cb85c
  font-size: 40rpx!important
  font-weight: bold

:deep(.nut-price--symbol-normal)
    font-size: 32rpx!important
:deep(.nut-price--normal)
    font-size: 34rpx!important
:deep(.nut-price--decimal-normal)
    font-size: 32rpx!important

:deep(.nut-price--decimal-normal)
    font-size: 32rpx!important

:deep(.ipt-sl)
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
</style>

<style lang="sass">
.nut-row
  overflow: hidden
  margin-bottom: 15px
</style>
